<template>
  <view class="container">
    <!-- 订单信息 -->
    <view class="section">
	  <view class="Tsection">
		  <text class="section-title">订单信息</text>
		  <text class="section-one">已退款</text>
	  </view>  
      <view class="info">
        <text class="info-one">订单号：121212112487878</text>
        <text class="info-one">服务项目：车辆保养</text>
        <text class="info-one">服务门店：大宝车辆维修店 <text class="icon">🚗</text></text>
        <text class="info-one">下单时间：2023-03-08 17:40</text>
        <text class="info-one">预约时间：2023-03-09 17:40</text>
        <text class="info-one">车辆：奔驰FWE4/豫A98FHJ</text>
        <text class="info-one">备注：</text>
      </view>
	  
    </view>

    <!-- 订单详情 -->
    <view class="section">
	  <view class="Tsection">
		  <text class="section-title">订单详情</text>
	  </view>
      <view class="details">
        <view class="row">
          <text class="row-one">车辆精洗</text>
          <text class="row-two">¥39.90</text>
        </view>
        <view class="row">
          <text class="row-one">车辆附加费用</text>
          <text class="row-two">0</text>
        </view>
        <view class="row">
          <text class="row-one">原价</text>
          <text class="row-two">¥59.90</text>
        </view>
        <view class="row">
          <text class="row-one">店家优惠</text>
          <text class="discount">- ¥20</text>
        </view>
        <view class="row">
          <text class="row-one">优惠券</text>
          <text class="discount">- ¥10</text>
        </view>
        <view class="row total">
          <text class="row-one">支付金额</text>
          <text class="total-amount">¥29.90</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
	  <button class="btn-contact">联系客服</button>
      <button class="btn-repeat">再来一单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 这里可以放置订单的动态数据
    }
  },
}
</script>

<style scoped>
.container {
  background-color: #f8f8f8;
  padding: 20rpx;
}

.nav-bar {
  background-color: #007aff;
  padding: 24rpx;
  text-align: center;
  color: white;
  font-size: 36rpx;
}

.section {
  background-color: white;
  margin-top: 20rpx;
  padding: 30rpx;
  border-radius: 10rpx;
}
.discount {
  color: red;
  display: block;
  height: 80rpx;
  width: 25%;
  float: right;
  /* background-color: bisque; */
  text-align: right;
  padding-right: 10rpx;
  line-height: 80rpx;
}

.total {
  font-weight: bold;
  border-top: 1px solid #e0e0e0;
  margin-top: 10rpx;
  padding-top: 10rpx;
}

.total-amount {
  color: green;
  display: block;
  height: 80rpx;
  width: 25%;
  float: right;
  /* background-color: bisque; */
  text-align: right;
  padding-right: 10rpx;
  line-height: 80rpx;
}

.footer {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}

.btn-contact, .btn-rate, .btn-repeat {
  width: 30%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.btn-contact {
  background-color: #f0f0f0;
  color: black;
}

.btn-rate {
  background-color: grey;
  color: white;
}

.btn-repeat {
  background-color: #007aff;
  color: white;
}

/* 设置 */
.section-title{
	display: block;
	width: 70%;
	height: 80rpx;
	/* background-color: yellowgreen; */
	font-weight: 600;
	line-height: 80rpx;
	padding-left: 10rpx;
	float: left;
}
.section-one{
	width: 28%;
	height: 80rpx;
	/* background-color: #007aff; */
	float: right;
	font-size: 28rpx;
	text-align: right;
	line-height: 80rpx;
	color: #FF602F;
}
.info{
	height: 560rpx;
	/* background-color: firebrick; */
}
.Tsection{
	height: 80rpx;
	/* background-color: deepskyblue; */
	border-bottom: #F7F7F7 solid 7rpx;
}
.info-one{
	display: block;
	height: 80rpx;
	/* background-color: green; */
	line-height: 80rpx;
}
.details{
	height: 650rpx;
	/* background-color: blueviolet; */
}
.row{
	display: block;
	height: 80rpx;
	/* background-color: #FF602F; */
	border-bottom: #F7F7F7 solid 3rpx;
}
.row-one{
	display: block;
	height: 80rpx;
	width: 70%;
	float: left;
	line-height: 80rpx;
	padding-left: 10rpx;
}
.row-two{
	display: block;
	height: 80rpx;
	width: 25%;
	float: right;
	text-align: right;
	/* background-color: bisque; */
	line-height: 80rpx;
	padding-right: 10rpx;
}
</style>
